<template>
  <div class="dashboard-editor-container">

    <panel-group :initData="initData" />
    <el-row :gutter="32">
      <el-col
        :xs="24"
        :sm="24"
        :lg="8"
      >
        <div class="chart-wrapper">
          <div
            ref="sfsqChart"
            style="height: 400px;width:100%"
          ></div>
        </div>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :lg="8"
      >
        <div class="chart-wrapper">
          <div
            ref="qyqsChart"
            style="height: 400px;width:100%"
          ></div>
        </div>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :lg="8"
      >
        <div class="chart-wrapper">
          <div
            ref="bclxChart"
            style="height: 400px;width:100%"
          ></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col
        :xs="24"
        :sm="24"
        :lg="12"
      >
        <div class="chart-wrapper">
          <div
            ref="gzlChart"
            style="height: 300px;width:100%"
          ></div>
        </div>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :lg="12"
      >
        <div class="chart-wrapper">
          <div
            ref="qyjdChart"
            style="height: 300px;width:100%"
          ></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col
        :xs="24"
        :sm="24"
        :lg="24"
      >
        <div class="chart-wrapper">
          <div
            ref="fqsqlyChart"
            style="height: 300px;width:100%"
          ></div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import * as echarts from 'echarts';
import { getAnalysisStaticsInfo } from "@/api/business/hu_info";

export default {
  name: 'Index',
  components: {
    PanelGroup,
  },
  data() {
    return {
      initData: {}
    }
  },
  methods: {
    initQyqsChart(data) {
      const myChart = echarts.init(this.$refs.qyjdChart)
      const option = {
        title: {
          text: "签约趋势"
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          top: '10%',
          right: '3%',
          bottom: '3%',
          left: '0%',
          containLabel: true,
          show: true,
          borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        xAxis: [{
          type: 'category',
          data: data.map(d => d.name),
          axisTick: {
            alignWithLabel: true,
          },
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 240, 255, 0.3)'
            }
          }
        }],
        series: [
          {
            name: '签约趋势',
            type: 'line',
            data: data,
            animationEasing: 'cubicInOut',
            animationDuration: 2600,
            itemStyle: {
              normal: {
                label: {
                  show: true, position: 'top'
                }
              }
            },
          }
        ]
      }
      myChart.setOption(option);
      window.addEventListener('resize', () => { myChart.resize() });
    },
    initFqsqlyChart(data) {
      let xAxisData = data.map(item => item.name ? item.name : "其他");
      const myChart = echarts.init(this.$refs.fqsqlyChart)
      const option = {
        title: {
          text: "放弃申请理由分布"
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '10%',
          right: '3%',
          bottom: '3%',
          left: '0%',
          containLabel: true,
          show: true,
          borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        xAxis: [{
          type: 'category',
          data: xAxisData,
          axisTick: {
            alignWithLabel: true,
            show: false
          },
        }],
        legend: {
          data: xAxisData
        },
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 240, 255, 0.3)'
            }
          }
        }],
        series: [{
          name: "数量",
          type: 'bar',
          barWidth: '10',
          data: data,
          animationEasing: 'cubicInOut',
          animationDuration: 2600,
          itemStyle: {
            normal: {
              label: {
                show: true, position: 'top'
              }
            }
          },
        }]
      }
      myChart.setOption(option);
      window.addEventListener('resize', () => { myChart.resize() });
    },
    initGzlChart(data) {
      let xAxisData = [];
      let legendData = ["采集数量", "沟通数量"];
      let seriesData = [];
      let seriesZsl = [];
      let seriesSfgt = [];
      for (let item of data) {
        xAxisData.push(item.org);
        seriesZsl.push({ name: item.org, value: item.value })
        seriesSfgt.push({ name: item.org, value: item.gtsl })
      }
      seriesData.push({
        name: "采集数量",
        type: 'bar',
        barWidth: '10',
        data: seriesZsl,
        animationEasing: 'cubicInOut',
        animationDuration: 2600,
        itemStyle: {
          normal: {
            label: {
              show: true, position: 'top'
            }
          }
        },
      });
      seriesData.push({
        name: "沟通数量",
        type: 'bar',
        barWidth: '10',
        data: seriesSfgt,
        animationEasing: 'cubicInOut',
        animationDuration: 2600,
        itemStyle: {
          normal: {
            label: {
              show: true, position: 'top'
            }
          }
        },
      });
      const myChart = echarts.init(this.$refs.gzlChart)
      const option = {
        title: {
          text: "采集工作量情况"
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '10%',
          right: '3%',
          bottom: '3%',
          left: '0%',
          containLabel: true,
          show: true,
          borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        xAxis: [{
          type: 'category',
          data: xAxisData,
          axisTick: {
            alignWithLabel: true,
            show: false
          },
        }],
        legend: {
          data: legendData
        },
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 240, 255, 0.3)'
            }
          }
        }],
        series: seriesData
      }
      myChart.setOption(option);
      window.addEventListener('resize', () => { myChart.resize() });
    },
    initBclxChart(data, qyjdData) {
      data = data.sort((a, b) => b.value - a.value)
      const zsl = qyjdData.filter(d => d.name == "已签约")[0] ? qyjdData.filter(d => d.name == "已签约")[0].value : 0
      const myChart = echarts.init(this.$refs.bclxChart)
      const option = {
        title: {
          text: `签约补偿分布（共计${zsl}户）`
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: data.map(d => d.name),
        },
        series: [
          {
            name: '签约补偿分布',
            type: 'pie',
            radius: [15, 95],
            center: ['50%', '50%'],
            data: data,
            animationEasing: 'cubicInOut',
            animationDuration: 2600,
            label: {
              formatter: '{b}：{c}({d}%)\n',
            },
          }
        ]
      }
      myChart.setOption(option);
      window.addEventListener('resize', () => { myChart.resize() });
    },
    initSfsqChart(data, sqxqsl, xfxqsl, zsl) {
      let chartData = []
      data.forEach(d => {
        if (d.name == "是") {
          return true
        }
        if (!d.name) {
          d["name"] = "未明确"
        }
        if (d.name == "否") {
          d.name = "拒绝"
        }
        chartData.push(d)
      })
      sqxqsl.forEach(d => {
        if (d.name != "住房") {
          chartData.push(d)
        }
      })
      chartData = chartData.concat(xfxqsl).sort((a, b) => {
        return b.value - a.value
      })
      const myChart = echarts.init(this.$refs.sfsqChart)
      const option = {
        title: {
          text: `申请情况（共计${zsl}户）`
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: chartData.map(d => d.name),
        },
        series: [
          {
            name: '申请情况',
            type: 'pie',
            minAngle: 5,
            radius: [15, 95],
            center: ['55%', '50%'],
            data: chartData,
            animationEasing: 'cubicInOut',
            animationDuration: 2600,
            label: {
              formatter: '{b}：{c}({d}%)\n',
            },
          }
        ]
      }
      myChart.setOption(option);
      window.addEventListener('resize', () => { myChart.resize() });
    },
    initQyjdChart(oData, zsl) {
      const myChart = echarts.init(this.$refs.qyqsChart);
      let data = [];
      let wqySl = 0;
      oData.forEach(item => {
        if (item.name === "已签约") {
          data.push(item);
        } else {
          wqySl += item.value;
        }
      })

      data.push({ name: "未签约", value: wqySl })

      const option = {
        title: {
          text: `签约分布情况（共计${zsl}户）`
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: data.map(d => d.name),
        },
        series: [
          {
            name: '签约分布情况',
            type: 'pie',
            radius: [15, 95],
            center: ['50%', '50%'],
            data: data,
            animationEasing: 'cubicInOut',
            animationDuration: 2600,
            label: {
              formatter: '{b}：{c}({d}%)\n',
            },
          }
        ]
      }
      myChart.setOption(option);
      window.addEventListener('resize', () => { myChart.resize() });
    },
  },
  mounted() {
    getAnalysisStaticsInfo().then(res => {
      this.initQyjdChart(res.data.jdsl, res.data.husl);
      this.initSfsqChart(res.data.sfsqsl, res.data.sqxqsl, res.data.xfxqsl, res.data.husl);
      this.initBclxChart(res.data.qyxfxqsl, res.data.jdsl);
      this.initQyqsChart(res.data.near7DaysQysl);
      this.initGzlChart(res.data.gzlsl);
      this.initFqsqlyChart(res.data.fqsqlysl)
      res.data.zhusl = res.data.sfsqsl.filter(m => m.name == "是")[0].value / res.data.husl * 1.00 * 100
      this.initData = res.data;
    })
  },
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
